<template>
    <div class="navbar">
        <hamburger
                id="hamburger-container"
                :is-active="sidebar.opened"
                class="hamburger-container"
                @toggleClick="toggleSideBar"/>
        <breadcrumb
                id="breadcrumb-container"
                class="breadcrumb-container"/>


        <div class="right-menu">
            <template v-if="device!=='mobile'">
                <!--                <header-search class="right-menu-item"/>-->
                <!--                <screenfull class="right-menu-item hover-effect"/>-->
                <!--                <el-tooltip-->
                <!--                        :content="$t('navbar.size')"-->
                <!--                        effect="dark"-->
                <!--                        placement="bottom"-->
                <!--                >-->
                <!--                    <size-select class="right-menu-item hover-effect"/>-->
                <!--                </el-tooltip>-->
                <!--                <lang-select class="right-menu-item hover-effect"/>-->
            </template>
            <el-dropdown class="avatar-container right-menu-item hover-effect"
                         trigger="click">
                <div class="avatar-wrapper">
                    <img src="@/assets/image/admin/manage_user.jpg" class="user-avatar">
                    <i class="el-icon-caret-bottom"/>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <div @click="go('UserDetails')">
                        <el-dropdown-item>
                        <span style="display:block;">
                            <svg-icon name="user-role"/> &nbsp;&nbsp;详 细 信 息
                        </span>
                        </el-dropdown-item>
                    </div>
                    <!--                    <el-dropdown-item divided>-->
                    <!--                        <span style="display:block;">-->
                    <!--                            <svg-icon name="user-account"/>&nbsp; 详 细 信 息-->
                    <!--                        </span>-->
                    <!--                    </el-dropdown-item>-->

                    <div @click="showSwitch()">
                        <el-dropdown-item divided>
                            <span style="display:block;">
                                <svg-icon name="switch-account"/>&nbsp;&nbsp;切 换 账 号</span>
                        </el-dropdown-item>
                    </div>
                    <div @click="openUpdatePassword()">
                        <el-dropdown-item divided>
                            <span style="display:block;">
                                <svg-icon name="user-update-password"/>&nbsp;&nbsp;修 改 密 码</span>
                        </el-dropdown-item>
                    </div>

                    <div @click="logOut()">
                        <el-dropdown-item divided>
                            <span style="display:block;">
                             <svg-icon name="user-log-out"/>&nbsp;&nbsp;安 全 退 出</span>
                        </el-dropdown-item>
                    </div>

                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!--切换账号Dialog-->
        <el-dialog title="切换账号" :visible.sync="switchOpen"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;" width="50%">
            <el-form ref="mFormData" label-width="120px"
                     style="margin-left: 30px;margin-right: 60px;">
                <el-form-item label="账号" prop="value">
                    <el-input v-model="account" placeholder="账号"/>
                </el-form-item>
                <el-form-item label="密码" prop="value">
                    <el-input type="password" @keyup.enter.native="startSwitchAccount()" v-model="password"
                              placeholder="密码"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--添加按钮-->
                <el-button @click="switchOpen=false" size="medium">取 消</el-button>
                <el-button type="primary" plain size="medium" @click="startSwitchAccount()">确 定
                </el-button>
            </div>
        </el-dialog>

        <!--    修改密码Dialog    -->
        <el-dialog title="修改密码" :visible.sync="passwordOpen"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;" width="50%">
            <el-form label-width="120px" style="margin-left: 30px;margin-right: 60px;">
                <el-form-item label="原密码" prop="value">
                    <el-input type="password" v-model="oldPassword" placeholder="请输入原密码"/>
                </el-form-item>
                <el-form-item label="新密码" prop="value">
                    <el-input type="password" v-model="newPassword1" placeholder="请输入新密码"/>
                </el-form-item>
                <el-form-item label="再次输入新密码" prop="value">
                    <el-input type="password" v-model="newPassword2" placeholder="请再次输入新密码"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--添加按钮-->
                <el-button @click="passwordOpen=false" size="medium">取 消
                </el-button>
                <el-button type="primary" plain size="medium" @click="startUpdatePassword()">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {AppModule} from '@/core/store/modules/app'
    import {UserModule} from '@/core/store/modules/user'
    import Breadcrumb from '@/core/layouts/components/Breadcrumb.vue'
    import Hamburger from '@/core/layouts/components/Hamburger.vue'
    import HeaderSearch from '@/core/layouts/components/HeaderSearch.vue'
    import LangSelect from '@/core/layouts/components/LangSelect.vue'
    import Screenfull from '@/core/layouts/components/Screenfull.vue'
    import SizeSelect from '@/core/layouts/components/SizeSelect.vue'
    import {TagsViewModule} from "@/core/store/modules/tags-view";
    import {
        getUserInfo,
        removeAllCache,
        setMenus,
        setMenusPath,
        setRefreshToken, setResources, setRoleInfo,
        setToken,
        setUserInfo
    } from "@/core/utils/storage";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {arrangeMenu, md5, tree} from "@/core/utils/Utils";

    @Component({
        name: 'Navbar',
        components: {
            Breadcrumb,
            Hamburger,
            HeaderSearch,
            LangSelect,
            Screenfull,
            SizeSelect
        }
    })
    export default class Navbar extends mixins(BaseVue, Kit) {
        get sidebar() {
            return AppModule.sidebar
        }

        get device() {
            return AppModule.device.toString()
        }

        get avatar() {
            return UserModule.avatar
        }

        toggleSideBar() {
            AppModule.ToggleSideBar(false)
        }

        logout() {
            TagsViewModule.delAllCachedViews();
            TagsViewModule.delAllViews();
            UserModule.LogOut();
            removeAllCache();
            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }

        getName() {
            return getUserInfo().name;
        }

        getUserAccount() {
            return getUserInfo().account;
        }

        getUserName() {
            return getUserInfo().name;
        }


        // * 修改昵称
        nameOpen = false;
        newName = "";

        showUpdateName() {
            this.newName = "";
            this.nameOpen = true;
        }

        //退出登录
        logOut() {
            TagsViewModule.delAllCachedViews();
            TagsViewModule.delAllViews();
            UserModule.LogOut();
            removeAllCache();
            this.$router.push(`/login?redirect=/index`)
        }

        //切换账号
        switchOpen = false;
        account = "";
        password = "";

        showSwitch() {
            this.account = "";
            this.password = "";
            this.switchOpen = true;
        }

        startSwitchAccount() {
            let password = md5(this.account + this.password).toUpperCase();
            $http.post(API.sysUserLogin, {account: this.account, password: password})
                .then((res: any) => {
                    if (res.success) {
                        this.account = "";
                        this.password = "";

                        //缓存身份令牌
                        setToken(res.data.token);
                        //缓存刷新凭证
                        setRefreshToken(res.data.refreshToken);
                        //缓存用户信息
                        setUserInfo(res.data.userInfo);
                        //角缓存色信息
                        setRoleInfo(res.data.roleInfo);
                        //缓存资源
                        setResources(res.data.roleResources);

                        //处理路由
                        let menuObj: any = arrangeMenu(res.data.roleMenus);
                        //缓存路由Path
                        setMenusPath(menuObj.menusPath);
                        //缓存路由对象
                        setMenus(tree(menuObj.mMenus));

                        TagsViewModule.delAllCachedViews();
                        TagsViewModule.delAllViews();
                        this.go("/").then(() => {
                            window.location.href = process.env.VUE_APP_URL + "";
                        })
                    }
                });

            // $http.post(API.login, {account: this.account, password: ""})
            //     .then((res: any) => {
            //         if (res.success) {
            //         } else {
            //             errorMsg(res.message)
            //         }
            //     });
        }


        //修改密码
        passwordOpen: any = false;
        oldPassword: any = "";
        newPassword1: any = "";
        newPassword2: any = "";

        startUpdatePassword() {
            if (!this.oldPassword || !this.newPassword1 || !this.newPassword2 ||
                this.oldPassword.toString().trim() == "" ||
                this.newPassword1.toString().trim() == "" ||
                this.newPassword2.toString().trim() == "") {
                errorMsg("请正确输入内容");
                return;

            }

            if (this.newPassword1 != this.newPassword2) {
                errorMsg("新密码两次输入不一致");
                return;
            }

            if (this.newPassword1.toString().trim().length < 8) {
                errorMsg("密码长度至少8位");
                return;
            }

            let old_password = md5(getUserInfo().account + this.oldPassword).toUpperCase();
            let new_password = md5(getUserInfo().account + this.newPassword1).toUpperCase();
            $http.post(API.sysUpdatePassword, {"oldPassword": old_password, "newPassword": new_password})
                .then((res: any) => {
                    //登录成功
                    if (res.success) {
                        successMsg("密码修改成功");
                        this.passwordOpen = false;
                    }
                });
        }

        openUpdatePassword() {
            this.oldPassword = "";
            this.newPassword1 = "";
            this.newPassword2 = "";
            this.passwordOpen = true;
        }


    }
</script>

<style lang="scss" scoped>
    .navbar {
        height: 50px;
        overflow: hidden;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

        .hamburger-container {
            line-height: 46px;
            height: 100%;
            float: left;
            padding: 0 15px;
            cursor: pointer;
            transition: background .3s;
            -webkit-tap-highlight-color: transparent;

            &:hover {
                background: rgba(0, 0, 0, .025)
            }
        }

        .breadcrumb-container {
            float: left;
        }

        .errLog-container {
            display: inline-block;
            vertical-align: top;
        }

        .right-menu {
            float: right;
            height: 100%;
            line-height: 50px;

            &:focus {
                outline: none;
            }

            .right-menu-item {
                display: inline-block;
                padding: 0 8px;
                height: 100%;
                font-size: 18px;
                color: #5a5e66;
                vertical-align: text-bottom;

                &.hover-effect {
                    cursor: pointer;
                    transition: background .3s;

                    &:hover {
                        background: rgba(0, 0, 0, .025)
                    }
                }
            }

            .avatar-container {
                margin-right: 30px;

                .avatar-wrapper {
                    margin-top: 5px;
                    position: relative;

                    .user-avatar {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        border-radius: 10px;
                    }

                    .el-icon-caret-bottom {
                        cursor: pointer;
                        position: absolute;
                        right: -20px;
                        top: 25px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
